<template>
  <div class="ShowClass">
    <div class="title">{{ type }}</div>
    <div class="content" style="min-height: 520px">
      <!--  <div class="card" v-for="book in pageBookList" :key="book.id">
        <el-card shadow="hover" style="height: 100%; cursor: pointer">
          <div style="height: 300px; overflow: hidden">
            <img :src="book.cover" style="width: 100%" :onerror="imageError" />
          </div>

          <template #footer>
            <h2 class="bookTitle">{{ book.title }}</h2>
            <p class="info">{{ book.content }}</p>
          </template>
        </el-card>
      </div> -->
      <el-skeleton
        class="card"
        :loading="book.loading"
        animated
        v-for="book in pageBookList"
        :key="book.id"
      >
        <template #template>
          <!--  -->
          <el-card shadow="hover" style="height: auto; cursor: pointer">
            <div style="height: 300px; overflow: hidden">
              <el-skeleton-item
                variant="image"
                style="width: 100%; height: 300px"
              />
            </div>

            <template #footer>
              <el-skeleton-item
                variant="text"
                class="bookTitle"
                style="display: block; margin-bottom: 5px"
                >{{ book.title }}</el-skeleton-item
              >
              <el-skeleton-item
                variant="text"
                class="info"
                style="display: block"
                >{{ book.content }}</el-skeleton-item
              >
            </template>
          </el-card>
          <!--  -->
        </template>
        <template #default>
          <div class="card">
            <el-card shadow="hover" style="height: 100%; cursor: pointer">
              <div style="height: 300px; overflow: hidden">
                <img
                  :src="book.cover"
                  style="width: 100%"
                  @error="imageError"
                />
              </div>

              <template #footer>
                <h2 class="bookTitle" style="margin-bottom: 5px">
                  {{ book.title }}
                </h2>
                <p class="info">{{ book.content }}</p>
              </template>
            </el-card>
          </div>
        </template>
      </el-skeleton>
    </div>
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :page-count="pageCount"
      :total="total"
      class="mt-4"
      style="justify-content: center"
      :current-page="currentPage"
      @current-change="currentpage"
    />
  </div>
</template>

<script setup>
import d_book from "../../assets/images/d-book.png";
import { ref, defineProps, defineEmits, onMounted, computed, watch } from "vue";
import {
  getMalePopRank,
  getMaleGoodSaleRank,
  getMaleNewBookRank,
  getMaleFreeBookRank,
  getMaleFinishedBookRank,
  getFemalePopRank,
  getFemaleGoodSaleRank,
  getFemaleNewBookRank,
  getFemaleFreeBookRank,
  getFemaleFinishedBookRank,
} from "../../api/api";
const props = defineProps({
  type: Number,
  apiType: String,
});
let bookList = ref([]);
let pageBookList = ref([]);
let currentPage = ref(1);
let total = computed(() => {
  return bookList.length;
});
let pageCount = computed(() => {
  return Math.ceil(bookList.value.length / 4);
});
const type = computed(() => {
  switch (props.type) {
    case 1:
      return "人气榜";
      break;
    case 2:
      return "畅销榜";
      break;
    case 3:
      return "新书榜";
      break;
    case 4:
      return "免费榜";
      break;
    case 5:
      return "完结榜";
      break;
  }
});
//图片加载错误回调
let imageError = (e) => {
  e.target.src = d_book;
};
//翻页回调
let currentpage = (v) => {
  currentPage.value = v;
  console.log(bookList.value);
  pageBookList.value = bookList.value.slice(
    (currentPage.value - 1) * 4,
    currentPage.value * 4
  );
  pageBookList.value.forEach((item) => {
    item.loading = true;
  });
  getImages();
};
//数据处理
let handleData = (data) => {
  bookList.value = data.list;
  pageBookList.value = bookList.value.slice(0, 4);
  pageBookList.value.forEach((item) => {
    item.loading = true;
  });
  getImages();
};

let getImages = async () => {
  let count = 0;
  for (const item of pageBookList.value) {
    let image = new Image();
    image.src = item.cover;
    image.onerror = (e) => {
      e.target.src = d_book;
    };
    image.onload = () => {
      setTimeout(() => {
        item.loading = false;
      }, 500);
    };
  }
};
onMounted(() => {
  let currentPage = ref(1);
  if (props.apiType == "getMalePopRank") {
    getMalePopRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getMaleGoodSaleRank") {
    getMaleGoodSaleRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getMaleNewBookRank") {
    getMaleNewBookRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getMaleFreeBookRank") {
    getMaleFreeBookRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getMaleFinishedBookRank") {
    getMaleFinishedBookRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getFemalePopRank") {
    getFemalePopRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getFemaleGoodSaleRank") {
    getFemaleGoodSaleRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getFemaleNewBookRank") {
    getFemaleNewBookRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getFemaleFreeBookRank") {
    getFemaleFreeBookRank().then((res) => {
      handleData(res);
    });
  } else if (props.apiType == "getFemaleFinishedBookRank") {
    getFemaleFinishedBookRank().then((res) => {
      handleData(res);
    });
  }
});
</script>

<style scoped lang="scss">
.ShowClass {
  margin-top: 20px;
  height: 560px;
  .title {
    font-size: 20px;
    padding: 5px 0;
    position: relative;
    padding-left: 24px;
    border-bottom: 1px dashed #ccc;
    &::before {
      content: "";
      display: block;
      position: absolute;
      height: 100%;
      width: 10px;
      background: red;
      left: 0;
      top: 0;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;

    .card {
      width: 25%;

      .bookTitle {
        font-size: 16px;
        font-weight: bold;
        height: 48px;
      }
      .info {
        line-height: 20px;
        height: 40px;
        overflow: hidden;
        text-align: justify;
      }
    }
  }
}
</style>
